@import "../../../common";

.container {
  padding: 0;
}


.box {
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-sizing: border-box;
  padding: 0 20rpx;
  height: auto;

  .assess {
    padding: 80rpx 0 0 0rpx;

    .title {
      @include fontStyle(32, 32, #FFFFFF);


    }

    .describe {
      width: 70%;
      margin-top: 24rpx;
      @include fontStyle(28, 42, #FFFFFF);
    }
  }

  .tab {
    margin-top: 94rpx;
    box-sizing: border-box;
    @include flex-space-between;

    .item {
      width: 226rpx;
      height: 226rpx;
      box-sizing: border-box;
      background: #FFFFFF;
      border-radius: 12rpx;
      // border: 1rpx solid #95A8FE;
      position: relative;
      z-index: 1;

      .triangle {
        width: 50rpx;
        height: 50rpx;
        border-radius: 12rpx;
        display: block;
        position: absolute;
        bottom: -20rpx;
        left: 50%;
        transform: translate(-50%, 0) rotate(45deg);
        background-color: var(--color-theme);
        z-index: 0;
        opacity: 0;

      }

      &.active {
        background-color: var(--color-theme);
        border: 0;

        .triangle {
          opacity: 1;
        }

        .ratio,
        .ratio text,
        .time,
        .time text {
          color: #ffffff;
        }
      }

      .ratio {
        margin-top: 60rpx;
        text-align: center;
        @include fontStyle(28, 28, #000000);
        display: flex;
        justify-content: center;
        align-items: center;

        text {
          color: var(--color-theme);
        }
      }

      .time {
        text-align: center;
        @include fontStyle(28, 28, #000000);
        margin-top: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        text {
          @include fontStyle(56, 56, #000000, 500);
        }
      }

      &.item_1 .label {
        background: #4FBE99;
      }

      &.item_2 .label {
        background: #FE5953;
      }

      .label {
        position: absolute;
        left: 0;
        top: -20rpx;
        width: 80rpx;
        height: 40rpx;
        background: #FA8A4B;
        border-radius: 12rpx 0rpx 12rpx 0rpx;
        @include fontStyle(28, 28, #FFFFFF, 500);
        @include flex-center;

      }
    }
  }

  .main {
    margin-top: 58rpx;
    position: relative;

    .describe {
      height: 298rpx;
      background: linear-gradient(270deg, #5395FF 0%, #3B5DF3 100%);
      border-radius: 24rpx 24rpx 0rpx 0rpx;

      .title {
        padding-top: 40rpx;
        text-align: center;
        @include fontStyle(32, 32, #FFFFFF, 500);
        @include flex-center;

        image {
          @include size(28, 28, 0);
          margin: 0 16rpx;

          &.right-img {
            transform: rotate(180deg);
          }
        }

        .icon {
          &.left {
            transform: rotate(90deg);
          }

          width: 28rpx;
          height: 28rpx;
          margin: 0 16rpx;
          display: flex;
          justify-content: space-around;
          transform: rotate(-90deg);

          .icon_1 {
            height: 100%;
            width: 2rpx;
          }

          .icon_2 {
            height: 70%;
            width: 2rpx;
          }
        }

        text {
          width: 26rpx;
          height: 18rpx;
          display: block;
          box-sizing: border-box;
          border-top: 2rpx solid #fff;
          border-bottom: 2rpx solid #fff;
          position: relative;

          &:after {
            content: '';
            width: 16rpx;
            height: 2rpx;
            background-color: #fff;
            display: block;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
          }

          &.title_2 {
            &:after {
              left: 0;
            }
          }
        }
      }

      .a {
        text-align: center;
        @include fontStyle(28, 28, #FFFFFF);
        margin-top: 16rpx;
      }
    }

    .content {
      width: 100%;
      height: auto;
      margin-top: -156rpx;
      padding-bottom: 60rpx;

      .list {
        background-color: #fff;
        border-radius: 24rpx;
        box-sizing: border-box;
        padding: 0 24rpx;
        padding-bottom: 56rpx;

        .item {
          padding-top: 56rpx;
        }

        .line {
          @include flex-space-between;
          padding-top: 40rpx;
          flex-wrap: wrap;

          &.column {
            height: 56rpx;
            background: linear-gradient(270deg, rgba(165, 195, 248, 0.3) 0%, #A5C3F8 100%);
            border-radius: 28rpx;
            box-sizing: border-box;
            overflow: hidden;
            padding: 0;

            .title {
              @include fontStyle(32, 32, #FFFFFF, 500);
              padding: 0 24rpx;
              background: var(--color-theme);
              height: 100%;
              line-height: 56rpx;
              width: 200rpx;
              position: relative;



              .arrow {
                width: 50rpx;
                height: 50rpx;
                border-radius: 8rpx;
                display: block;
                position: absolute;
                top: 50%;
                right: -30rpx;
                transform: translate(0, -50%) rotate(45deg);
                background-color: var(--color-theme);
                z-index: 0;
              }
            }

            .time {
              @include fontStyle(28, 28, #3b5df3, 500);
              box-sizing: border-box;
              padding: 0 24rpx 0 0;
              @include flex;

              image {
                display: block;
                width: 28rpx;
                height: 28rpx;
                margin-right: 8rpx;
              }
            }
          }

          .b {
            width: 100%;
            box-sizing: border-box;
            padding: 40rpx 0 0 40rpx;
            @include fontStyle(28, 42, #666666);
          }
        }

        .suboption {
          .title {
            @include fontStyle(28, 28, #000000, 400);
            @include flex;
            padding-left: 24rpx;

            text {
              display: block;
              width: 8rpx;
              height: 8rpx;
              background: var(--color-theme);
              border-radius: 50%;
              margin-right: 10rpx;
            }
          }

          .time {
            @include fontStyle(28, 28, #666666, 400);
          }
        }
      }
    }
  }
}